<template>
  <div class="auth-status" v-if="showStatus">
    <div class="status-indicator" :class="statusClass">
      <span class="status-icon">{{ statusIcon }}</span>
      <span class="status-text">{{ statusText }}</span>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'

const showStatus = ref(false)
const isLoggedIn = ref(false)
const userType = ref('')

const statusClass = computed(() => {
  return isLoggedIn.value ? 'logged-in' : 'not-logged-in'
})

const statusIcon = computed(() => {
  return isLoggedIn.value ? '✅' : '❌'
})

const statusText = computed(() => {
  if (!isLoggedIn.value) {
    return '未登录'
  }
  return `已登录 (${userType.value || '用户'})`
})

const checkAuthStatus = () => {
  const accessToken = localStorage.getItem('access_token')
  const userTypeValue = localStorage.getItem('user_type')
  
  isLoggedIn.value = !!accessToken
  userType.value = userTypeValue || ''
  showStatus.value = true
}

onMounted(() => {
  checkAuthStatus()
  
  // 监听localStorage变化
  window.addEventListener('storage', checkAuthStatus)
})
</script>

<style scoped>
.auth-status {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 1000;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 8px;
  padding: 8px 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  font-size: 12px;
}

.status-indicator {
  display: flex;
  align-items: center;
  gap: 6px;
}

.status-icon {
  font-size: 14px;
}

.status-text {
  font-weight: 500;
}

.logged-in {
  color: #52c41a;
}

.not-logged-in {
  color: #ff4d4f;
}
</style> 